<template>
    <view class="content">
		<view class="navtop">
			<view class="txtnav">
				<view :class="cur==0?'actives':''" @tap="swidths(0)">门店收藏</view>
				<view :class="cur==1?'actives':''" @tap="swidths(1)">商品收藏</view>
			</view>
			<view class="gltxt" @tap="zkbtn">
				<image v-if="checks==false" src="/static/zh.png" mode="widthFix"></image>
				<span>{{checks?'完成':'管理'}}</span>
			</view>
		</view>
		<view class="listsy" v-if="cur==0" :class="checks==true?'listsy1':''" v-for="(item,index) in list" :key="index">
			<view class="xzimg" v-if="checks==true" @tap="swidths1(index)">
				<image :src="item.checks?'/static/wxicon2.png':'/static/wxicon1.png'" mode="widthFix"></image>
			</view>
			<image :src="imgoss+item.pic" mode="aspectFill" class="cpimg"  @tap="jump('/subcontract/shop/index?id='+item.id)"></image>
			<view class="itemlist"  @tap="jump('/subcontract/shop/index?id='+item.id)">
				<view>{{ item.name }}</view>
				<scroll-view scroll-x="true" class="navtap">
					<view class="txts" v-for="(item1,index1) in item.cete" :key="index1">{{ item1.name }}</view>
					
				</scroll-view>
				<view class="txts1">{{ item.province_name }}{{ item.city_name }}{{ item.area_name }}{{ item.address }}</view>
				<view class="txts2">
					<view><span>￥</span>{{ item.money }}</view>
					<view>
						<image src="/static/tyicon.png" mode="widthFix"></image>
						<span>{{item.is_all == 2?'全天营业':'营业'}}至{{ item.end_h }}:{{ item.end_i }}</span>
					</view>
					<view>{{ item.distance }}km</view>
				</view>
			</view>
		</view>
		<view class="cplist">
			<view v-if="cur==1" :class="checks==true?'listsy2':''"  v-for="(item,index) in list" :key="index">
				<image :src="imgoss+item.pic" mode="aspectFill" @tap="jump('/subcontract/shop/details?id='+item.id)" class="zrimg"></image>
				<view class="cplist1" @tap="jump('/subcontract/shop/details?id='+item.id)">
					<view>{{item.name}}</view>
					<view><span>￥</span>{{item.money}}</view>
				</view>
				<view class="xzimg" v-if="checks==true" @tap="swidths2(index)">
					<image :src="item.checks?'/static/wxicon2.png':'/static/wxicon1.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="morder" v-if="more ==1">没有更多数据</view>
		<view class="btnfor" v-if="checks">
			<view>
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox :checked="ischecked" value="1" color="#CB1717" style="transform:scale(0.7)" />
						全选
					</label>
				</checkbox-group>
			</view>
			<view @tap="scbtn">移除收藏</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
			imgoss: app.globalData.imgoss,
			img_src: app.globalData.img_src,
            cur:0,
			checks:false,
			ischecked:false,
			list:[],
			arrid:[],
			arrid1:[],
			usercollect:[],
			is_type:1,
			more:0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        var that = this;
		this.page=0;
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		this.usercollectlist()
	},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
		this.page = 0;
		this.usercollectlist();
	},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
		this.page++;
		this.usercollectlist();
	},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		jump(url){
			uni.navigateTo({
				url:url
			})
		},
		//移除
		scbtn(){
			var that = this;
			//console.log(that.arrid)
			//console.log(that.arrid1)
			uni.showModal({
				title: '温馨提示',
				content: '是否确认删除选中得数据？',
				success: function (res) {
					if (res.confirm) {
						app.globalData.api.request('User/collectDelete', {
							ids:that.cur==0?that.arrid.join(','):that.arrid1.join(','),
							is_type:that.cur==0?1:2
						}, 'post', 'form').then((res) => {
							if (res.code == 0) {
								that.usercollectlist()
								that.arrid = []
								that.arrid1 = []
								that.ischecked = false
							}else{
								app.globalData.show(res.msg)
							}
						});
					} else if (res.cancel) {
						//console.log('用户点击取消');
					}
				}
			});
		},
		// 门店单选
		swidths1(idx){
			this.allchecks(idx,0)
		},
		allchecks(idx,type){
			var arr = [];
			var that = this;
			var list = this.list
			//console.log(idx,type)
			if(type==0){
				// 单选
				//console.log(this.list[idx].checks)
				this.list[idx].checks = this.list[idx].checks==false?true:false
				//console.log(this.list)
				list.forEach(function(item,index){
					if(item.checks){
						arr.push(item.id)
					}
				})
				this.ischecked = arr.length == list.length?true:false
			}else{
				// 全选
				list.forEach(function(item,index){
					if(that.ischecked==false){
						item.checks = false 
						arr = []
					}else{
						item.checks = true
						arr.push(item.id)
					}
					
				})
				this.ischecked = arr.length == list.length?true:false
			}
			if(this.cur==0){
				this.arrid = arr
			}else{
				this.arrid1 = arr
			}
			
		},
		//商品单选
		swidths2(idx){
			this.allchecks(idx,0)
		},
		checkboxChange: function(e) {
			var values = e.detail.value;
			if (values.length > 0) {
				this.ischecked = true;
			} else {
				this.ischecked = false;
			}
			this.allchecks('',1)
		},
		zkbtn(){
			this.checks = !this.checks
		},
		swidths(cur){
			this.cur = cur
			this.arrid = []
			this.arrid1 = []
			this.ischecked = false
			this.page = 0;
			this.list = []
			this.usercollectlist()
			// if(cur==0){
			// 	this.ischecked = this.arrid.length == this.list.length?true:false
			// }else{
			// 	this.ischecked = this.arrid1.length == this.list1.length?true:false
			// }
		},
		//我的收藏
		usercollectlist()
		{
			var that = this;
			//console.log(this.cur);
			//is_type 必选 string 类型/1门店/2商品
			if(this.cur == 0){
				var is_type = 1;
			}else{
				var is_type = 2;
			}
			
			app.globalData.api.request('User/userCollect', {
				page:this.page,
				is_type:is_type,
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					//console.log(res)
					res.data.forEach(function(item,index){
						item.checks = false
					})
					that.list = this.page>0?this.list.concat(res.data):res.data;
					this.more = res.data.length==0?1:0
				}else{
					app.globalData.show(res.msg)
				}
			});
		}
	}
};
</script>
<style lang="scss">
	
	.btnfor{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
		position: fixed;
		left: 0px;
		bottom: 0px;
		z-index: 10;
		background-color: #fff;
	}
	.btnfor>view:nth-child(1){
		float: left;
		color: rgb(0,0,0);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-medium;
	}
	.btnfor>view:nth-child(2){
		float: right;
		border-radius: 10rpx;
		background-color: rgba(134,101,175,1);
		color: rgba(255,255,255,1);
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		line-height: 60rpx;
		padding: 0px 40rpx;
	}
	.btnfor>view:nth-child(1)>span{
		color: #D9688E !important;
	}
	.cplist1{
		width: 100%;
		min-height: 160rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}
	.cplist1>view{
		width: 100%;
		height: auto;
		display: table;
	}
	.cplist1>view:nth-child(1){
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: left;
		font-weight: bold;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}
	.cplist1>view:nth-child(2){
		color: rgba(217,104,142,1);
		font-size: 28rpx;
		text-align: left;
		margin-top: 10rpx;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}
	.cplist1>view:nth-child(2)>span{
		font-size: 24rpx !important;
	}
	.zrimg{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 20rpx;
		left:20rpx;
	}
	.cplist{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 0rpx 0rpx;
		position: relative;
	}
	.cplist>view{
		width: 100%;
		min-height: 200rpx;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		padding-left: 200rpx;
		position: relative;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
	}
	.listsy2{
		padding-left: 260rpx !important;
	}
	.listsy2>.zrimg{
		left:80rpx;
	}
	.xzimg{
		width: 40rpx;
		height: 100%;
		position: absolute;
		top: 0px;
		left:20rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.xzimg>image{
		width: 20px;
		height: auto;
	}
	.bgback{
		width: 100%;
		height: 100vh;
		background-color: #fff;
		position: fixed;
		top: 0px;
		left: 0px;
	}
	.txts2>view{
		width: auto;
		height: 45rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.txts2>view:nth-child(1){
		color: rgba(217,104,142,1);
		font-size: 32rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
	.txts2>view:nth-child(1)>span{
		font-size: 28rpx !important;
	}
	.txts2>view:nth-child(2){
		color: #fff;
		font-size: 28rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
		border-radius: 8rpx;
		background: linear-gradient(97.47deg, rgba(104,102,177,1) 3.79%,rgba(162,99,175,1) 95.07%);
		padding: 0px 10rpx;
		margin-left: 20rpx;
		box-sizing: border-box;
	}
	.txts2>view:nth-child(2)>image{
		width: 26rpx;
		height: auto;
		margin-right: 7rpx;
	}
	.txts2{
		width: 100%;
		height: 45rpx;
		display: inline-flex;
		float: left;
		margin-top: 10px;
		position: relative;
	}
	.txts2>view:nth-child(3){
		position: absolute;
		top: 0px;
		right: 0px;
		line-height: 45rpx;
		color: rgba(157,102,171,1);
		font-size: 24rpx;
	}
	.txts1{
		width: 100%;
		height: auto;
		display: table;
		line-height: 45rpx;
		color: rgba(16,16,16,1);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.txts{
		border-radius: 5rpx;
		background-color: rgba(255,255,255,1);
		color: rgba(149,149,149,1);
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(230,230,230,1);
		box-sizing: border-box;
		padding: 0px 20rpx;
		margin: 5px 0px;
		display: inline-block;
		margin-right: 20rpx;
		line-height: 40rpx;
	}
	.navtap{
		display: inline-flex;
		white-space: nowrap;
		width:100%;
		height:auto;
	}
	.itemlist>view:nth-child(1){
		width: 100%;
		height: auto;
		display: table;
		color: rgba(16,16,16,1);
		font-size: 30rpx;
		text-align: left;
		font-family: PingFangSC-bold;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.itemlist{
		width: 100%;
		min-height: 236rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0px;
		border-bottom: 1px solid rgba(187,187,187,0.3);
	}
	.cpimg{
		width: 177rpx;
		height: 236rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 20rpx;
		left:20rpx;
	}
	.listsy{
		width: 704rpx;
		min-height: 276rpx;
		display: block;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		padding:0px 20rpx;
		padding-left: 217rpx;
		background-color: #fff;
		position: relative;
		border-radius: 10rpx;
	}
	.listsy1{
		padding-left: 270rpx !important;
	}
	
	.listsy1>.cpimg{
		left: 80rpx;
	}
	page{
		background-color: rgba(245,245,245,1);
	}
	.gltxt{
		width: auto;
		height: 90rpx;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		float: right;
		color: rgb(16,16,16);
		font-size: 24rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
	.gltxt>image{
		width: 40rpx;
		height: auto;
	}
	.navtop{
		width:100%;
		height: 90rpx;
		background-color: #fff;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
		box-sizing: border-box;
		padding: 0px 24rpx;
	}
	.txtnav{
		width:auto;
		height:70rpx;
		display: inline-flex;
		float: left;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
	}
	.actives{
		color: rgba(132, 102, 176, 1) !important;
	}
	.txtnav>view{
		width: 50%;
		height: 70rpx;
		display: table;
		float: left;
		line-height: 70rpx;
		text-align: center;
		position: relative;
		font-size: 28rpx;
		color: #333;
	}
	.txtnav>view:nth-child(1){
		margin-right: 80rpx;
	}
	.actives::after{
		content: "";
		width: 110rpx;
		height: 2px;
		background-color:rgba(132, 102, 176, 1);
		position: absolute;
		left: 50%;
		bottom: 0px;
		margin-left: -55rpx;
	}
	.content {
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 110rpx 24rpx;
		padding-bottom: 120rpx;
	}
</style>
